<script setup>
import { ref, toRaw } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import Type from '@components/search/type'
import Search from '@components/search/index'
import PageWrapper from '@components/PageWrapper.vue'
import { common, service } from '@utils'
import { Plus, Edit, View } from '@element-plus/icons-vue'
import { usePremission, useRole } from '@hooks'

const premission = usePremission()

const searchs = ref([
    {
        type: Type.INPUT,
        key: 'search',
        width: 6,
        placeholder: 'sdfsf'
    },
    {
        width: 6,
        type: Type.SEARCH_BUTTON
    }
])

const pageRef = ref()
const tableRef = ref()

let queryForm = {}

const onSearch = (param) => {
    queryForm = param
    pageRef.value.refresh()
}

const getData = async ({ pageNum, pageSize }, cb) => {
    const res = await service(pageNum, pageSize, queryForm)
    cb(res)
    setTimeout(() => {
        tableRef.value.scrollTo(0, 0)
    }, 0)
}

const showDetail = async (item) => {

}

const showEdit = async (item) => {

}

const width = (function (premission) {
    let width = 24
    premission.view && (width += 33)
    premission.edit && (width += 33)
    return Math.max(width, 72)
})(premission)
</script>
<template>
    <section class="main-white">
        <search :items="searchs" @filter="onSearch" />
        <div class="margin-bottom10" v-if="premission.add">
            <el-button type="primary" :icon="Plus" @click="showEdit()">添加</el-button>
        </div>
        <page-wrapper @get-data="getData" ref="pageRef">
            <template v-slot:default="props">
                <vxe-table class="mytable-scrollbar" ref="tableRef" :loading="props.loading" :data="props.tableData.records" :max-height="common.tableHeight(true, premission.add ? 2 : 1)"
                    highlight-hover-row round stripe border>
                    <vxe-column type="seq" width="60"></vxe-column>
                    <vxe-column field="id" title="ID" width="60" />
                    <vxe-column title="操作" :width="width" fixed="right">
                        <template #default="{ row }">
                            <section class="flex-align flex-wrap">
                                <el-tooltip v-if="premission.view" effect="dark" content="详情" placement="top"
                                    :enterable="false">
                                    <el-button type="primary" plain :icon="View" size="small" circle @click="showDetail(row)"></el-button>
                                </el-tooltip>
                                <el-tooltip v-if="premission.edit" effect="dark" content="修改" placement="top"
                                    :enterable="false">
                                    <el-button type="primary" :icon="Edit" size="small" circle @click="showEdit(row)">
                                    </el-button>
                                </el-tooltip>
                            </section>
                        </template>
                    </vxe-column>
                </vxe-table>
            </template>
        </page-wrapper>
    </section>
</template>